<template>
  <div class="page">
    <navigation>{{ coinSymbol }}{{ $t('钱包地址') }}</navigation>
    <div class="page-space"></div>
    <div class="qrcode">
      <div v-if="data.addr" class="qrcode-tip">{{ data.addr }}</div>
      <div v-else class="qrcode-tip">
        {{ $t('这是您的') }}{{ coinSymbol }}{{ $t('钱包地址') }}，{{ $t('请将您的') }}{{ coinSymbol }}{{ $t('转入此地址') }}
      </div>
      <div class="qrcode-img">
        <qrcode-vue v-if="data.addr" :value="data.addr" size="100"></qrcode-vue>
        <img v-else src="@/assets/images/qrcode.svg" />
      </div>
      <div v-if="data.addr" class="qrcode-btn" @click="clipboard">
        {{ $t('复制充币地址') }}
      </div>
      <div v-else class="qrcode-btn" @click="getWalletAddr">
        {{ loading ? $t("获取中...") : $t("获取充币地址") }}
      </div>
    </div>
    <div class="note">
      <div class="note-title">{{ $t('转入说明') }}</div>
      <ul class="note-list">
        <li>1、{{ $t('充值后经过20个网络确认后自动到账') }}</li>
        <li>2、{{ $t('此地址是您的唯一且独自使用的转入地址，可以进行多次充值') }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { Toast } from 'mint-ui'
import QrcodeVue from 'qrcode.vue'
import { copyText } from '@/utils/dom'
import navigation from '@/components/Navigation'
export default {
  components: { navigation, QrcodeVue },
  data () {
    return {
      loading: false,
      coinSymbol: this.$route.query.coin,
      data: {
        addr: ''
      }
    }
  },
  methods: {
    ...mapActions({
      withdrawGenerateAddress: 'fund/withdrawGenerateAddress'
    }),
    getWalletAddr () {
      if (this.loading) {
        return
      }
      const payload = {
        coin_symbol: this.coinSymbol,
        generate: 1
      }
      const succeed = ({ data }) => {
        this.loading = false
        this.data = data
      }

      const failed = (error) => {
        this.loading = false
        Toast(error.message || '获取地址错误')
      }
      this.loading = true
      this.withdrawGenerateAddress(payload)
        .then(succeed)
        .catch(failed)
    },
    clipboard () {
      if (copyText(this.data.addr)) {
        Toast(this.$t('复制成功'))
      } else {
        Toast('复制失败')
      }
    }
  }
}
</script>
<style scoped>
.qrcode {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.qrcode-img {
  width: 136px;
  height: 136px;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.qrcode-img img {
  width: 100px;
  height: 100px;
}
.qrcode-btn {
  margin-top: 30px;
  min-width: 90px;
  height: 25px;
  padding: 4px 10px;
  line-height: 25px;
  text-align: center;
  color: #519ee6;
  font-size: 14px;
  background-color: #ecf5fa;
  border-radius: 3px;
}
.qrcode-tip {
  margin: 20px;
  color: #333;
  font-size: 12px;
}
.note {
  margin-top: 30px;
  padding: 2% 5%;
  line-height: 20px;
}
.note-title {
  font-size: 14px;
  margin-bottom: 15px;
}
.note-list {
}
.note-list li {
  color: #929292;
  margin-bottom: 8px;
}
</style>
